<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="./../template/WorkspaceTemplate.xhtml">

    <ui:define name="top">

    </ui:define>

    <ui:define name="left">
    </ui:define>

    <ui:define name="right">

    </ui:define>

    <ui:define name="content">

        <h2>Manage Finished Goods</h2>

        <h:form id="form">  
            <p:growl id="growl" showDetail="true" life="5000" /> 
            <p:messages showDetail="true" />

            <p:dataTable id ="finishedGoods" var="fGoods" value="#{pmManagerBean.viewAllFinishedGoods()}" style="border: black" >  


                <p:column filterBy="#{fGoods.inventory.product.productType}"   
                          headerText="Product Type" 
                          filterOptions="#{pmManagerBean.createFilterOptions()}" 
                          filterMatchMode="exact">  
                    <h:outputText value="#{fGoods.inventory.product.productType}" />  
                </p:column>  


                <p:column   headerText="Batch No."  >  
                    <h:outputText value="#{fGoods.batchNo}"  > 
                    </h:outputText>
                </p:column>  

                <p:column   headerText="Quantity"  >  
                    <h:outputText value="#{fGoods.quantity}"  > 
                    </h:outputText>
                </p:column> 

                <p:column   headerText="Manufacturing Date"  >  
                    <h:outputText value="#{fGoods.dateManufactured}"  > 
                    </h:outputText>
                </p:column> 

                <p:column   headerText="Expiry Date"  >  
                    <h:outputText value="#{fGoods.dateExpired}"  > 
                    </h:outputText>
                </p:column> 

                <p:column>
                    <f:facet name="header">
                        Base Price<br/>(Per Bar)
                    </f:facet>
                    <h:outputText value="#{fGoods.basePrice}">
                        <f:convertNumber type="currency"/>
                    </h:outputText>
                </p:column> 


                <f:facet name="footer">  
                    <p:commandButton value="New" image="ui-icon ui-icon-pencil" 
                                     ajax="true" update="dialogForm" action="#{pmManagerBean.createNewFD}"
                                     oncomplete="createDlg.show()"/>

                </f:facet>
            </p:dataTable>  

        </h:form> 



        <p:dialog id="createDialogue" header="Create Finished Goods Record" widgetVar="createDlg" resizable="false"  
                  width="400" showEffect="clip" hideEffect="fold">  

            <h:form id="dialogForm">

                <br/>
                <p:messages showDetail="true" />

                <h:panelGrid id="display" columns="2" cellpadding="4">  

                    <h:outputText value="Product Type:" />
                    <h:selectOneMenu id="product" value="#{pmManagerBean.fgTypeId}" label="Product">  
                        <f:selectItem itemLabel="-- Select One --" itemValue="-1" />  
                        <f:selectItems value="#{pmManagerBean.allProduct}" var="pd" itemLabel="#{pd.productType}" itemValue="#{pd.id}"/>
                    </h:selectOneMenu> 

                    <h:outputText value="Batch No.:" />   
                    <h:outputText value="#{pmManagerBean.fg.batchNo}" />

                    <h:outputText value="Quantity:" />   
                    <p:inputText id="qty" required="true" requiredMessage="Quantity cannot be empty" 
                                 value="#{pmManagerBean.fg.quantity}" />

                </h:panelGrid>  
                <p:commandButton value="Submit" action="#{pmManagerBean.createFinishedGoodsRecord}" update="form,dialogForm" ajax="true" oncomplete="handleLoginRequest(xhr, status, args)"/>


            </h:form>  
        </p:dialog>

        <p:dialog id="updateDialogue" header="Update Finished Goods Record" widgetVar="updateDlg" resizable="false"  
                  width="400" showEffect="clip" hideEffect="fold">  

            <h:form id="updateDialogForm">

                <br/>
                <p:messages showDetail="true" />

                <h:panelGrid id="display2" columns="2" cellpadding="4">  

                    <h:outputText value="Product Type:" />
                    <h:outputText value="#{pmManagerBean.fg.inventory.product.productType}" />


                    <h:outputText value="Batch No.:" />   
                    <h:outputText value="#{pmManagerBean.fg.batchNo}" />

                    <h:outputText value="Quantity:" />   
                    <p:inputText id="qty" required="true" requiredMessage="Quantity cannot be empty" 
                                 value="#{pmManagerBean.fg.quantity}" />

                </h:panelGrid>  
                <p:commandButton value="Submit" action="#{pmManagerBean.updateFinishedGoodsRecord}" 
                                 ajax="true" update="form,updateDialogForm" oncomplete="handleLoginRequest2(xhr, status, args)"/>


            </h:form>  
        </p:dialog>

        <script type="text/javascript">  
            function handleLoginRequest(xhr, status, args) {  
                 if(args.validationFailed || !args.valid) {  
                 jQuery('#createDialogue').parent().effect("shake", { times:3 }, 100);  
                 } else {  
                     createDlg.hide();  
                    //jQuery('#updateDlg').fadeOut();  
                }  
            }
            
            function handleLoginRequest2(xhr, status, args) {  
                 if(args.validationFailed || !args.valid) {  
                 jQuery('#updateDialogue').parent().effect("shake", { times:3 }, 100);  
                 } else {  
                     updateDlg.hide();  
                    //jQuery('#updateDlg').fadeOut();  
                }  
            }
            
        </script>  

    </ui:define>

    <ui:define name="bottom">

    </ui:define>

</ui:composition>
